<template>
  <div class="search-index">
    <Header></Header>
    <section>
        <div class="search-history" v-if="searchArr.length">
            <h2>
                <i class="iconfont icon-24gl-thumbsUp2"></i>
                <span>历史搜索</span>
                <span @click="deleteSto">清空历史记录</span>
            </h2>
            <ul>
                <li v-for="(item, index) in searchArr" :key="index" @click="goSearchList(item)">{{item}}</li>
            </ul>
        </div>
        <div v-else class="zw">暂无搜索记录...</div>
        <hr/>

        <!-- <div>
            <h1>推荐商品</h1>
            <Like></Like>
        </div> -->

    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/common/Tabbar.vue'
// import Like from '@/components/home/Like.vue'
import Header from '@/components/search/Header.vue'
import { MessageBox } from 'mint-ui';
export default {
    data() {
        return {
            searchArr: []
        }
    },
    created() {
        this.searchArr = JSON.parse(localStorage.getItem('searchList'))  || []
    },
    methods: {
        deleteSto() {
            MessageBox({
                title: '提示',
                message: '确定执行此操作?',
                showCancelButton: true
            }).then(res => {
                if(res == 'confirm') {
                    //删除本地存储
                    localStorage.removeItem('searchList')
                    //清除数据
                    this.searchArr = []
                }
            })
        },
        //点击历史搜索，进入搜索页面结果页面
        goSearchList(item) {
            // 跳转页面
            this.$router.push({
                name: 'list',
                query: {
                    key: item
                }
            })
        }
    },
    components: {
    Tabbar,
    Header,
    // Like
}
}
</script>

<style scoped>
    .search-index {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    section {
        flex: 1;
        background-color: #f5f5f5;
        overflow: hidden;
    }
    .search-history h2 {
        position: relative;
        padding: .4rem;
        font-size: .4rem;
        font-weight: 400;
    }
    .search-history h2 span:last-child {
        position: absolute;
        right: .4rem;
    }
    .search-history h2 i {
        padding-right: .14rem;
        color: red;
        font-size: 0.48rem;
    }
    .search-history ul {
        display: flex;
        flex-wrap: wrap;
        padding: .4rem 0;
    }
    .search-history ul li {
        margin: .2rem;
        padding: .06rem .12rem;
        font-size: .4rem;
        border: 1px solid #ccc;
    }
    .zw {
        margin: .4rem;
        font-size: .4rem;
    }
</style>